<template>
  <div class="home">
    <!-- 导航 -->
    <van-nav-bar fixed :border="false" @click-right="$router.push('/search')">
      <template #right>
        <van-icon name="search" color="#fff" size="25"/>
      </template>
    </van-nav-bar>
    <!-- 视频列表 -->
    <video-list :list="videos" :initIndex="initIndex" :current="current"></video-list>
  </div>
</template>

<script>
import VideoItem from '@/components/VideoItem.vue'
import VideoList from '@/components/VideoList.vue'

export default {
  name: 'Home',
  components: {
    VideoItem,VideoList
  },
  data(){
    return{
      current: 0,
      initIndex: 0,
      videos: [],
      query:{
        pagesize: 3,
        pagenum: 0,
      },
      hasMore: true
    }
  },
  watch:{
    current(){
      if(this.current == this.videos.length-1){
        this.query.pagenum = this.query.pagenum+1
        this.getPageVideos()
      }
    }
  },
  methods:{
    // 分页获取视频
    getPageVideos(){
      // 如果还有更多，继续加载
      if(this.hasMore){
        this.axios.get('api/videos',{params:this.query}).then(res=>{
          if(res.code==0){
            if(res.videos.length !=this.query.pagesize){
              this.hasMore = false
            }
            this.videos = [...this.videos,...res.videos]
            this.initIndex = this.current
          }else{
            this.$toast('获取视频失败')
          }
        })
      }
      // 否则提示没有更多
      else{
        this.$toast({message:'暂无更多',position:'bottom'})
      }
    }
  },
  created(){
    this.getPageVideos()
  },
}
</script>

<style lang="scss" scoped>
.van-nav-bar{
  background: transparent;
}
</style>
